<template>
  <div class="approveFrom">
    <div class="selectBox" v-for="(item, index) in fromData" :key="index">
      <div class="processTitle">
        <span v-if="item.required" style="color: red">*</span>
        <span v-else style="opacity: 0">*</span>
        {{ item.name }}：
      </div>
      <div class="inputBox">
        <a-select
          mode="multiple"
          label-in-value
          v-model="item.selectValue"
          placeholder="Select users"
          style="width: 100%"
          :filter-option="false"
          @search="fetchUser"
          @change="handleChange"
          @focus="onFocus(index)"
          @blur="onBlur"
        >
          <a-spin v-if="fetching" slot="notFoundContent" size="small" />
          <a-select-option v-for="(i, d) in item.selectedUsers" :key="d">
            {{ i.name }}
          </a-select-option>
        </a-select>
      </div>
    </div>
  </div>
</template>
<script>
import debounce from "lodash/debounce";
export default {
  name: "approveFrom",
  data() {
    // this.lastFetchId = 0;
    this.fetchUser = debounce(this.fetchUser, 800);
    return {
      fromData: [],
      // optionData: [], // 下拉框option数据
      // selectValue: [], // 选中并回显的数据
      fetching: false,
      nowIndex: null,
    };
  },
  mounted() {
    this.getFromData()
  },
  methods: {
    // 1.请求表单渲染接口
    getFromData() {
      setTimeout(() => {
        let datas = [
          {
            name: "PIProjectChangeRequestWf",
            oid: "OR:wt.workflow.definer.WfProcessTemplate:92316",
            edit: true,
            required: false,
            initUsers: null,
            selectedUsers: null,
          },
          {
            name: "初审",
            oid: "OR:wt.workflow.definer.WfAssignedActivityTemplate:92337",
            edit: true,
            required: false,
            initUsers: null,
            selectedUsers: null,
          },
          {
            name: "审核",
            oid: "OR:wt.workflow.definer.WfAssignedActivityTemplate:92319",
            edit: true,
            required: true,
            initUsers: null,
            selectedUsers: [
              {
                id: "wt.org.WTUser:11",
                icon: "<img src='/Windchill/netmarkets/images/user.gif'/>",
                name: "Administrator",
                fullname: "wcadmin",
              },
              {
                id: "wt.org.WTUser:122053",
                icon: "<img src='/Windchill/netmarkets/images/user.gif'/>",
                name: "wyu",
                fullname: "wyu",
              },
            ],
          },
          {
            name: "执行变更",
            oid: "OR:wt.workflow.definer.WfAssignedActivityTemplate:92321",
            edit: true,
            required: true,
            initUsers: null,
            selectedUsers: [
              {
                id: "wt.org.WTUser:122053",
                icon: "<img src='/Windchill/netmarkets/images/user.gif'/>",
                name: "wyu",
                fullname: "wyu",
              },
            ],
          },
          {
            name: "确认变更结果",
            oid: "OR:wt.workflow.definer.WfAssignedActivityTemplate:92332",
            edit: true,
            required: true,
            initUsers: null,
            selectedUsers: null,
          },
        ];
        this.fromData = datas.slice(1, datas.length);
        this.fromData.map(item => {
          this.$set(item, 'selectValue', [])
        })
        console.log(this.fromData);
      }, 1000);
    },
    fetchUser(value) {
      this.fromData[this.nowIndex].selectedUsers = []
      // console.log(this.fetchUser, 0);
      // console.log('fetching user', value);
      // this.lastFetchId += 1;
      // const fetchId = this.lastFetchId
      // this.optionData = [];
      this.fetching = true;
      if (value.trim().length < 3) {
        this.$message.warn("请输入三个以上字符");
        this.fetching = false;
        return;
      }
      // 请求接口
      setTimeout(() => {
        let data = [
          {
            id: "wt.org.WTUser:11",
            icon: "<img src='/Windchill/netmarkets/images/user.gif'/>",
            name: "Administrator",
            fullname: "wcadmin",
          },
          {
            id: "wt.org.WTUser:122053",
            icon: "<img src='/Windchill/netmarkets/images/user.gif'/>",
            name: "wyu",
            fullname: "wyu",
          },
          {
            id: "wt.org.WTUser:122053",
            icon: "<img src='/Windchill/netmarkets/images/user.gif'/>",
            name: "wyu111",
            fullname: "wyu111",
          },
        ];
        this.fromData[this.nowIndex].selectedUsers = data.map((item) => {
          return {
            id: item.id,
            name: item.fullname,
          };
        });
        this.fetching = false;
      }, 3000);
    },
    handleChange(value) {
      this.fromData[this.nowIndex].selectValue = value;
    },
    onFocus(i) {
      this.nowIndex = i;
    },
    onBlur() {},
  },
};
</script>
<style lang="less" scoped>
.approveFrom {
  margin-top: 3vh;
  display: flex;
  flex-direction: column;
  padding-left: 1.5vw;
  .selectBox {
    display: flex;
    align-items: center;
    margin-bottom: 2vh;
    .processTitle {
      width: 12vw;
    }
    .inputBox {
      width: 50vw;
    }
  }
}
</style>